<template>
  <header>
    <el-menu :default-active="defaultActive" mode="horizontal" :style="{padding:'0 100px'}" background-color="#337ccb" text-color="#fff" :router="true" active-text-color="#ffd04b">
      <el-menu-item v-for="(item,index) in list" :index="item.url" :key="index">{{item.name}}</el-menu-item>
      <div style="float: right;">
        <template v-if="!!isLogin">
          <el-dropdown @command="handleDropdown">
            <el-button   type="text" style="color:#FFF;height: 60px;font-size: 14px;">
              {{userData.username}}
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="exitSystem">退出用户</el-dropdown-item>
              <el-dropdown-item command="routerToinformation">个人信息</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
        <template v-else>
          <el-menu-item index="/login">登录</el-menu-item>
          <el-menu-item index="/register">
            <a>注册</a>
          </el-menu-item>
        </template>
      </div>
    </el-menu>
  </header>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  name: "THeader",
  props: {
    active: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      list: [
        { url: "/travel-reference", name: "旅游攻略" },
        { url: "/footprints-share", name: "好友分享" },
        { url: "/travel-footprints", name: "旅游足迹" },
        { url: "/travel-notes", name: "旅游游记" }
      ]
    };
  },
  methods:{
    ...mapActions(["exitSystemAction"]), 
    ...mapActions(["informationAction"]),
	 
    handleDropdown(command) {
      if(command==='exitSystem'){
        this.exitSystemAction();
      }    
	 if(command==='routerToinformation'){
      const params = { path: `/personalinformation` }; 
      this.$router.push(params); 
      }  
    },
 
  },
  computed: {
    ...mapState({
      isLogin: state => state.userState.isLogin,
      userData: state => state.userState.userData
    }),
    
    defaultActive() {
      const fin = this.list.find(item => {
        return String(this.active).search(item.url) !== -1;
      });
      return fin ? fin.url : this.active;
    },
    
  }
};
</script>

